import React , { Component } from "react";

import {range,serializeContent,unserializeContent} from "../../../utils/tools"
import SSCBall from "../../BallStyle/SSCBall"
import {Toast} from "antd-mobile"
export default class ZDW extends Component{
  constructor (props){
    super(props)
    this.state= {
     isShow:[]
    }
    this.height = [];
 }
 componentDidMount(){
    for(var k in this.refs){
      this.height.push(this.refs[k].offsetHeight)
    }
 }
  baseinfo(){
    return [
      {name:"万位",key:"万"},
      {name:"千位",key:"仟"},
      {name:"百位",key:"佰"},
      {name:"十位",key:"拾"},
      {name:"个位",key:"个"}
    ]
  }
  isIncude(state,item){
    var num = state.indexOf(item)
    num< 0 ? state.push(item) : state.splice(num,1)
   }
  order(key,num){
    const {content,select} = this.props
    let id = content[0].id
    let number = select[id] && select[id].number
    if(!number){
      number = serializeContent({[key]: [num]});
    }else{
      let numbers = unserializeContent(number);
      let nums = numbers[key];
      if (!nums) {
        nums = [];
      }
      let index = nums.indexOf(num);
      if (index == -1) {
        nums.push(num);
      } else {
        nums.splice(index, 1);
      }
      if(nums.length==0){
        delete numbers[key]
      }else{
        numbers[key] = nums;
      }
     
      var maxlength = 2
      if(this.props.itemcode == "SZDW"){
        maxlength = 3
      }
      // console.log(numbers,"13");
      if(Object.keys(numbers).length >maxlength){
        debugger
        return Toast.fail(`有且只能选择${maxlength}组`)
      }
      number = serializeContent(numbers);
    }
    // console.log(number,"23");

    let clonecontent = Object.assign({},content[0],{number})
    this.props.order(clonecontent,clonecontent.id)
  }
 show(index){
  const { isShow} = this.state
  this.isIncude(isShow,index)
  this.setState({
    isShow
  })
 }
  render(){
    const {content,select} = this.props;
    let baseinfo = this.baseinfo()
    // console.log(select,"zdw");
    
    // let page = content.length / baseinfo.length
    let id = content[0].id
    let number = select[id] ? select[id].number: null;
    let selectedGroupNums = {};
    if (number) {
      selectedGroupNums = unserializeContent(number);
    }
     return  <div className="panl">
{          this.baseinfo().map((item,index)=>{
            let isshow = this.state.isShow.indexOf(index)
            return  <div className="panel" key={index}>
            <div className="panel_head">
              <div className="icon" onClick={()=>{
                this.show(index)
              }}>
                <i className={isshow>-1 ? "iconfont icon-xiala shang" : "iconfont icon-xiala"}></i>
              </div>
              {item.name}
            </div>
            <div ref={index} className={isshow>-1 ? "panel_body  hidden" : "panel_body"}
             style={{"height":this.height[index] ?  this.height[index] : "auto"}}>
             <div className="peilv">
                <div className="num">
                {range(0,9).map((num,i)=>{
                   let isSelected = selectedGroupNums[item.key] && selectedGroupNums[item.key].indexOf(num) != -1;
                  return <li key={i} onClick={()=>{
                          this.order(item.key,num)
                    }}
                    className={isSelected ? "selected" : ""}
                    >
                    <SSCBall num={num*1}></SSCBall>
                    <p className="red">{content[0].pl}</p>
                    </li>
                })}
                  </div>
            </div>
            </div>
          </div>
          })
}
      </div>
  }
}